<template>
    <div class="page-container">
        <div class="list">
            <div v-for="(item, index) in demoList" :key="index" class="item" @click="goDemo(item)">
                <div class="name">{{ item.name }}</div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { useRouter } from 'vue-router';

const demoList = [
    {
        name: '灵感发生器',
        path: '/inspiration-generator'
    },
    {
        name: 'MBTI战斗模拟器',
        path: '/mbti-battle'
    },
    {
        name: '照片打印机',
        path: '/printer'
    }
]

const router = useRouter()
const goDemo = (item) => {
    router.push(item.path)
}
</script>
<style lang="scss" scoped>
.page-container {
    padding: 16px 16px 100vh 16px;
    box-sizing: border-box;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    .header {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 16px;
    }
    .list {
        display: flex;
        flex-direction: column;
        gap: 8px;
        .item {
            padding: 16px;
            box-sizing: border-box;
            border-radius: 8px;
            background-color: var(--c-card-color);
            cursor: pointer;
            .name {
                font-size: 16px;
                font-weight: bold;
            }
            &:hover {
                background-color: var(--c-bg-hover-color);
            }
        }
    }
}
</style>